<template>
  <div class="calculator-model">
    <div v-show="dataItems && dataItems.length">
      <el-tag
        v-for="item in dataItems"
        :key="item.id"
        size="medium"
        type="success"
        @click="changeData('param',item[dataConfig.id],item[dataConfig.key],item[dataConfig.value])"
      >
        {{ item[dataConfig.value] }}
      </el-tag>
    </div>
    <div>
      <el-tag
        v-for="item in symbolList"
        :key="item"
        size="medium"
        type="success"
        @click="changeData('compute',item,item,item)"
      >
        {{ item }}
      </el-tag>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CalculatorModel',
  props: {
    // 数据格式
    dataConfig: {
      type: Object,
      default() {
        return {
          type: 'type',
          id: 'id',
          key: 'fieldKey',
          value: 'name'
        }
      }
    },
    // 传入的可进入公式的项
    dataItems: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      symbolList: ['(', ')', '清空', '回退', '7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '+']
    }
  },
  methods: {
    changeData() {
      // arguments: type, id, key, value
      // console.log(arguments)
      let operate = 'push'
      switch (arguments[1]) {
        case '清空':
          operate = 'clear'
          break
        case '回退':
          operate = 'delete'
          break
      }
      this.$emit('on-change', operate, ...arguments)
    }
  }
}
</script>
<style lang="scss">
.calculator-model{
  z-index: 1;
  position: absolute;
  left: 0px;
  bottom: -228px;
  width: 100%;
  min-width: 500px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  & >div{
    height: 100%;
    height: 200px;
    overflow-y: auto;
    padding: 5px;
    float: left;
    display: inline-flex;
    flex-wrap: wrap;
    & > span{
      margin: 5px;
      min-width: 44px;
      text-align: center;
    }
    &:first-child{
      width: calc(100% - 230px);
      border-right: 1px solid #DCDFE6;
    }
    &:last-child{
      width: 230px;
      border: 0;
      & > span:nth-child(17){
        width: 99px;
      }
    }
  }
}
</style>
